<template>
  <div class="app-container">
    <!--工具栏-->
    <el-card
      shadow="hover"
      class="maBt15"
      v-if="checkPermission(['payment@index']) && $store.state.user.queryShow"
    >
      <el-form inline>
        <el-form-item :label="$t('vip.vip1')">
          <el-input
            v-model="formInline.account"
            clearable
            :placeholder="$t('vip.vip1')"
            style="width: 150px"
            class="filter-item"
          />
        </el-form-item>
        <el-form-item :label="$t('vip.vip2')">
          <el-input
            v-model="formInline.nickname"
            clearable
            :placeholder="$t('vip.vip2')"
            style="width: 150px"
            class="filter-item"
          />
        </el-form-item>
        <!-- <el-form-item :label="$t('cashCheck.cashCheck1')">
          <el-select
            v-model="formInline.charge_currency"
            :placeholder="$t('common.common7')"
            clearable
            style="width: 150px"
          >
            <el-option
              v-for="item in currencyType"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item :label="$t('openCheck.openCheck2')">
          <el-select
            v-model="formInline.open_status"
            :placeholder="$t('common.common7')"
            clearable
            style="width: 150px"
          >
            <el-option
              v-for="item in checkStatus"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('openCheck.openCheck3')">
          <el-select
            v-model="formInline.user_type"
            :placeholder="$t('common.common7')"
            clearable
            style="width: 150px"
          >
            <el-option
              v-for="item in cardMode"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('cashCheck.cashCheck2')">
          <date-range-picker
            v-model="formInline.charge_time"
            class="date-item"
          />
        </el-form-item>
        <el-button class="filter-item" type="primary" @click="toQuery">{{
          $t("common.common4")
        }}</el-button>
        <el-button
          type="warning"
          icon="el-icon-download"
          @click="outFile"
          v-permission="['payment@explode']"
          :disabled="
            dataListSelections.length == 0 || formInline.user_type == ''
          "
          >{{ $t("vip.vip12") }}</el-button
        >
      </el-form>
    </el-card>
    <el-card shadow="hover">
      <div slot="header" class="clearfix">
        <query-btn />
      </div>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        border
        highlight-current-row
        @selection-change="selectionChangeHandle"
        :max-height="$store.state.app.tableHeight"
        v-permission="['payment@index']"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          minWidth="50"
          fixed="left"
        ></el-table-column>
        <el-table-column prop="id" min-width="80" fixed="left" label="ID" />
        <el-table-column
          prop="country_code"
          min-width="80"
          :label="$t('vip.vip13')"
        />
        <el-table-column
          prop="account"
          min-width="150"
          :label="$t('vip.vip1')"
        />
        <el-table-column
          prop="nickname"
          min-width="150"
          :label="$t('vip.vip2')"
        />
        <el-table-column
          prop="real_name"
          min-width="120"
          :label="$t('vip.vip14')"
        />
        <el-table-column
          prop="type"
          min-width="120"
          :label="$t('openCheck.openCheck1')"
        >
          <template slot-scope="scope">
            {{ scope.row.type | release(accountOption) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="user_type"
          min-width="120"
          :label="$t('openCheck.openCheck3')"
        >
          <template slot-scope="scope">
            {{ scope.row.user_type | release(cardMode) }}
          </template>
        </el-table-column>
        <el-table-column prop="from" min-width="120" :label="$t('vip.vip15')" >
          <template slot-scope="scope">
            <span>{{
             scope.row['from_'+langSufx]
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="payment"
          min-width="120"
          :label="$t('cashCheck.cashCheck1')"
        >
          <template slot-scope="scope">
            {{ scope.row.payment ? scope.row.payment.charge_currency : "" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="payment"
          min-width="120"
          :label="$t('cashCheck.cashCheck3')"
        >
          <template slot-scope="scope">
            {{
              scope.row.payment
                ? Number(scope.row.payment.charge_amount).toFixed(2)
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="payment"
          min-width="200"
          :label="$t('cashCheck.cashCheck2')"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.payment ? parseTime(scope.row.payment.charge_time) : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="open_status"
          min-width="120"
          :label="$t('openCheck.openCheck2')"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.open_status | getTagType">{{
              scope.row.open_status | release(checkStatus)
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="fail_info"
          min-width="300"
          :label="$t('openCheck.openCheck23')"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.open_status == "4"
                ? getReason(scope.row.fail_info)
                : "--"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          min-width="200"
          :label="$t('openCheck.openCheck4')"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.created_at) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="checked_at"
          min-width="200"
          :label="$t('openCheck.openCheck7')"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.checked_at) }}</span>
          </template>
        </el-table-column>
        <!--   操作   -->
        <el-table-column
          :label="$t('common.common3')"
          min-width="120px"
          align="center"
          fixed="right"
          class-name="iconBtn"
          v-if="checkPermission(['payment@read'])"
        >
          <template slot-scope="scope">
            <span
              @click="toAddEdit(scope.row.id)"
              v-show="[3,6].includes(scope.row.open_status)"
              v-permission="['payment@read']"
            >
              <btn-tip
                :content="$t('openCheck.openCheck8')"
                type="primary"
                icon="el-icon-s-check"
              ></btn-tip>
            </span>
            <span
              @click="toAddEdit(scope.row.id)"
              v-show="![3,6].includes(scope.row.open_status)"
              v-permission="['payment@read']"
            >
              <btn-tip
                :content="$t('vip.vip5')"
                type="success"
                icon="el-icon-view"
              ></btn-tip>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination
        v-permission="['payment@index']"
        :total="tableShow.listCount"
        :page.sync="tableShow.currentPage"
        :page-size.sync="tableShow.pageSize"
        @pageChange="getList"
      />
    </el-card>
    <!--表单渲染-->
    <add-edit ref="add_edit" :type="2" />
    <out-modal ref="out_modal" :legalize_type="2" />
  </div>
</template>

<script>
import AddEdit from "../openCheck/add_edit";
import OutModal from "../openCheck/out_modal";
import { parseTime } from "@/utils/index";
import { getCusList } from "@/api/openList/cashCheck";
import {
  accountOption,
  currencyType,
  checkStatus,
  renzhengMode,
  cardMode,
} from "@/assets/js/common";
import DateRangePicker from "@/components/DateRangePicker";

export default {
  components: {
    DateRangePicker,
    AddEdit,
    OutModal,
  },
  data() {
    return {
      accountOption,
      currencyType,
      checkStatus,
      renzhengMode,
      cardMode,
      loading: false,
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0,
      },
      tableData: [],
      formInline: {
        account: "",
        nickname: "",
        currency_type: "",
        open_status: "",
        user_type: "",
        charge_time: [],
      },
      dataListSelections: [], //多选
    };
  },
  computed:{
    langSufx() {
      return this.$store.state.settings.langTail;
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    parseTime,
    getList() {
      this.loading = true;
      getCusList(
        Object.assign({}, this.formInline, {
          charge_time:
            this.formInline.charge_time &&
            this.formInline.charge_time.length != 0
              ? [
                  parseInt(this.formInline.charge_time[0] / 1000),
                  parseInt(this.formInline.charge_time[1] / 1000),
                ]
              : [],
          legalize_type: "2",
          page: this.tableShow.currentPage,
          limit: this.tableShow.pageSize,
        })
      )
        .then((res) => {
          if (res.code == 10000) {
            this.tableData = res.data;
            this.loading = false;
            this.tableShow.listCount = res.count;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((error) => {
          this.$message.error(error.Error);
        });
    },
    getReason(Arr) {
      if (Arr.length == 0) {
        return "";
      } else {
        let reasonStr = "";
        Arr.forEach((item, index) => {
          if (index != Arr.length - 1) {
            reasonStr +=
              item["reason_" + this.$store.state.settings.langTail] + "，";
          } else {
            reasonStr += item["reason_" + this.$store.state.settings.langTail];
          }
        });
        return reasonStr;
      }
    },
    toQuery() {
      this.tableShow.currentPage = 1;
      this.getList();
    },
    toAddEdit(rowID) {
      this.$refs.add_edit.init(rowID);
    },
    outFile() {
      //导出文件
      this.$refs.out_modal.init(
        this.formInline.user_type,
        this.dataListSelections
      );
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>